@import "m_reset.scss";
@import "common.scss";


@function getvw($w){
    @return($w/750)*100 + vw;
}

.wrap{
    header{
        position: sticky;
        top: 0;
        z-index: 999;
        nav{
            width: 100%;
            display: flex;
            padding: getvw(17) getvw(23) getvw(9) getvw(23);
            justify-content: space-between;
            align-items: center;
            background-color: white;
            background-color: white;
            box-sizing: border-box;
            .logo{
                width: getvw(123);
                height: getvw(123);
                img{
                    width: getvw(123);
                    height: getvw(123);
                }
            }
            .search{
                position: relative;
                input{
                    width: getvw(265);
                    height: getvw(50);
                    border: 1px solid #ff9344;
                    border-radius: getvw(50);
                    font-size: getvw(24);
                    padding: 0 getvw(25);
                }
                i{
                    font-size: getvw(30);
                    color: #ff9344;
                    position: absolute;
                    right: getvw(16);
                    transform: translateY(-50%);
                    top: 50%;
                }
            }
            .area{
                position: relative;
                select{
                    width: getvw(160);
                    height: getvw(55);
                    border: 1px solid #ff9344;
                    appearance: none;
                    padding-left: getvw(14);
                }
                i{
                    // font-size: getvw();
                    color: #ff9344;
                    position: absolute;
                    right: getvw(11);
                    pointer-events: none;right: getvw(16);
                    transform: translateY(-50%);
                    top: 50%;
                }
            }
        }
    }
   
    main{
        .banner{
            width: 100vw;
            height: getvw(287);
            overflow: hidden;
            .banner-box{
                width: 300%;
                display: flex;
                animation: tbox 3s 2 alternate;
                .box{
                    width: calc(100% / 3);
                    img{
                        width: 100%;
                        display: block;
                    }
                }
                @keyframes tbox{
                    0%{
                        transform: translateX(0);
                    }
                    10%{
                        transform: translateX(calc(-100%/3));
                    }
                    50%{
                        transform: translateX(calc(-100%/3));
                    }
                    60%{
                        transform: translateX(calc(-100%/3*2));
                    }
                    100%{
                        transform: translateX(calc(-100%/3*2));
                    }
                }
            }
        }
        .shop{
            .shop-top{
                position: relative;
                padding: getvw(30) 0 0 getvw(30);
                box-sizing: border-box;
                i:nth-of-type(1){
                    font-size: getvw(54);
                    color: #ff9344;
                }
                span:nth-of-type(1){
                    font-size: getvw(30);
                    font-weight: bold;
                }
                span:nth-of-type(2){
                    font-size: getvw(24);
                    position: absolute;
                    top: getvw(60);
                    right: getvw(50);
                }
                i:nth-of-type(2){
                    font-size: getvw(24);
                    color: #ff9344;
                    position: absolute;
                    top: getvw(60);
                    right: getvw(20);
                }
            }
            .shop-main{
                width: getvw(580);
                height: getvw(225);
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                img{
                    width: getvw(240);
                    height: getvw(97);
                    margin-top: getvw(15);
                }
            }
        }
    
        .love{
           
            .love-top{
                position: relative;
                padding: getvw(30) 0 0 getvw(30);
                i:nth-of-type(1){
                    font-size: getvw(54);
                    color: #ff9344;
                }
                span:nth-of-type(1){
                    font-size: getvw(30);
                    font-weight: bold;
                }
                span:nth-of-type(2){
                    font-size: getvw(24);
                    position: absolute;
                    top: getvw(60);
                    right: getvw(50);
                }
                i:nth-of-type(2){
                    font-size: getvw(24);
                    color: #ff9344;
                    position: absolute;
                    top: getvw(60);
                    right: getvw(20);
                }
            }
            a{
                text-decoration: none;
                 .love-main{
                .love-main-box{
                    display: flex;
                    justify-content: space-between;
                    margin-top: getvw(10);
                    .love-main-img{
                        width: getvw(200);
                        margin-left: getvw(20);
                        img{
                            width: 100%;
                            display: block;
                        }
                    }
                    .love-main-center{
                        display: flex;
                        justify-content: space-around;
                        flex-direction: column;
                        span:nth-of-type(1){
                            font-size: getvw(30);
                            font-weight: bold;
                            color: black;
                        }
                        span:nth-of-type(2){
                            font-size: getvw(22);
                            color: gray;
                            display: block;
                        }
                        span:nth-of-type(3){
                            font-size: getvw(32);
                            font-weight: bold;
                            color: orange;
                        }
                    }
                    .love-main-right{
                        width: getvw(151);
                        height: getvw(164);
                        display: flex;
                        justify-content: space-around;
                        flex-direction: column;
                        span{
                            font-size: getvw(22);
                            color: gray;
                        }
                    }
                }
            }
            }
           
        }
    }



    .box{
        width: getvw(100);
        height: getvw(100);
        background-color: black;
        // margin-top: getvw(300);
    }
footer{
    ul{
        li:nth-of-type(1) i{
color: #ff9344;
        }
    }
}

}

